<template>
  <div>
    <Category :scene="scene" />
    <el-card style="margin-top: 10px">
      <div v-show="!scene">
        <el-button
          type="primary"
          icon="Plus"
          @click="addSpu"
          :disabled="!categoryStore.category3Id"
        >
          添加SPU
        </el-button>
        <el-table
          :data="tableData"
          border
          style="margin: 10px 0"
          :height="tableHeight"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            align="center"
          />
          <el-table-column label="SPU名称" prop="spuName" width="150px" />
          <el-table-column
            label="SPU描述"
            prop="description"
            show-overflow-tooltip
          />
          <el-table-column label="操作" width="210px" align="center">
            <template #="{ row }">
              <el-button
                icon="Plus"
                @click="addSku(row)"
                title="新增"
                size="small"
                type="primary"
              ></el-button>
              <el-button
                icon="Edit"
                @click="editSpuById(row.id)"
                title="修改"
                size="small"
                type="warning"
              ></el-button>
              <el-button
                icon="View"
                title="查看"
                size="small"
                type="success"
                @click="viewSku(row.id)"
              ></el-button>
              <el-popconfirm
                :title="`是否删除${row.spuName}？`"
                icon="Delete"
                width="220"
                @confirm="deleteSpuById(row.id)"
              >
                <template #reference>
                  <el-button
                    icon="Delete"
                    title="删除"
                    size="small"
                    type="danger"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="limit"
          :page-sizes="[3, 5, 10, 15]"
          :total="total"
          layout="prev, pager, next, total, ->, sizes, jumper"
          size="small"
          background
          @change="handleChange"
        />
      </div>
      <SpuForm v-show="scene === 1" ref="spuRef" @closed="spuClosed" />
      <SkuForm v-show="scene === 2" ref="skuRef" @closed="scene = 0" />
    </el-card>
    <SkuDialog ref="skuDialogRef" />
  </div>
</template>
<script setup lang="ts">
import Category from '@/components/Category/index.vue'
import { ref, watch } from 'vue'
import { getProductList, deleteSpu } from '@/api/product/spu'
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus'
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
import SkuDialog from './skuDialog.vue'

const categoryStore = useCategoryStore()

let scene = ref<number>(0)
const tableData = ref<any[]>([])
const tableHeight = window.innerHeight - 310 + 'px'
let pageNo = ref(1)
let limit = ref(10)
const total = ref(0)
const handleChange = (currentPage: number, pageSize: number) => {
  pageNo.value = currentPage
  limit.value = pageSize
  getProductListData()
}

const getProductListData = async () => {
  const { code, data } = await getProductList(
    pageNo.value,
    limit.value,
    categoryStore.category3Id
  )
  if (code === 200) {
    tableData.value = data.records
    total.value = data.total
  }
}
watch(
  () => categoryStore.category3Id,
  (newVal) => {
    tableData.value = []
    if (!newVal) return
    getProductListData()
  }
)

const deleteSpuById = async (id: string | number) => {
  const { code } = await deleteSpu(id)
  if (code === 200) {
    ElMessage.success('删除成功')
    getProductListData()
  } else {
    ElMessage.error('删除失败')
  }
}

const spuRef = ref()
const addSpu = () => {
  scene.value = 1
  spuRef.value.getBaseList()
}
const editSpuById = (id: string | number) => {
  scene.value = 1
  spuRef.value.getBaseList(id)
}
const spuClosed = () => {
  scene.value = 0
  getProductListData()
}
const skuDialogRef = ref()
const viewSku = (id: string | number) => {
  skuDialogRef.value.dialogVisible = true
  skuDialogRef.value.getTableData(id)
}
const skuRef = ref()
const addSku = (row:any) => {
  scene.value = 2
  skuRef.value.getSkuInfo(row)
}
</script>
<script lang="ts">
export default {
  name: 'Spu'
}
</script>
